<script setup lang="ts">
import { Pointer, Star } from '@element-plus/icons-vue'
import {
  getBlogDetails,
  unlikeBlog,
  likeBlog,
  collectBlog,
  unCollectBlog
} from '@/api/blog'
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import { usePageTitle } from '@/hooks/usePageTitle'
import { formatDateTime } from '@/utils/date'
import markdownIt from 'markdown-it'
import Comment from './sub-views/Comment.vue'

const route = useRoute()
const blogInfo: any = ref({})
const id: any = ref(route.params.id || '')
const md = markdownIt()
let content = ''

onMounted(async () => {
  const res: any = await getBlogDetails(id.value)
  blogInfo.value = res
  // md 插件需要直接传入字符串
  content = md.render(blogInfo.value.content) || ''
})
usePageTitle(blogInfo)

// 点赞和取消点赞
const likeBlogHandler = async () => {
  if (blogInfo.value.isLiked) {
    await unlikeBlog(id.value)
    blogInfo.value.likes -= 1
    blogInfo.value.isLiked = false
  } else {
    await likeBlog(id.value)
    blogInfo.value.likes += 1
    blogInfo.value.isLiked = true
  }
}

// 收藏和取消收藏
const collectBlogHandler = async () => {
  if (blogInfo.value.isFavorited) {
    unCollectBlog(id.value)
    blogInfo.value.favorites -= 1
    blogInfo.value.isFavorited = false
  } else {
    collectBlog(id.value)
    blogInfo.value.favorites += 1
    blogInfo.value.isFavorited = true
  }
}
</script>

<template>
  <div class="blog-details">
    <!-- 上层：标题 -->
    <div class="title">{{ blogInfo.title }}</div>

    <!-- 中层：作者和发表时间 -->
    <div class="author-time">
      <div class="left">
        <!-- 用户头像，这里使用了一个示意图标 -->
        <el-avatar class="user-icon" :src="blogInfo.userIconUrl"></el-avatar>
      </div>
      <div class="right">
        <div class="author">{{ blogInfo.author }}</div>
        <div class="created-at">{{ formatDateTime(blogInfo.createdAt) }}</div>
      </div>
    </div>

    <!-- 下层：内容 -->
    <div class="content" v-html="content"></div>
    <!-- 生成一个div,用于点赞和收藏，水平居中显示 -->
    <div class="centered-div">
      <!-- 点赞 -->
      <el-button
        :type="blogInfo.isLiked ? 'primary' : 'default'"
        :icon="Pointer"
        round
        @click="likeBlogHandler"
        >{{ blogInfo.likes }}</el-button
      >
      <!-- 收藏 -->
      <el-button
        :type="blogInfo.isFavorited ? 'primary' : 'default'"
        :icon="Star"
        round
        @click="collectBlogHandler"
        >{{ blogInfo.favorites }}</el-button
      >
    </div>
    <!-- 评论列表 -->
    <Comment />
  </div>
</template>

<style lang="scss" scoped>
.blog-details {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.author-time {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.user-icon {
  width: 64px;
  height: 64px;
  margin-right: 20px;
}

.right {
  display: flex;
  flex-direction: column;
}

.author {
  font-weight: bold;
  font-size: 18px;
  margin-bottom: 5px;
}

.created-at {
  font-size: 14px;
  color: #888;
}

.content {
  font-size: 16px;
  line-height: 1.5;
}

.centered-div {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 用于设置按钮之间的间距 */
  gap: 20px;
}

.like-button,
.favorite-button {
  padding: 10px 20px;
  background-color: #3498db; /* 设置按钮背景颜色 */
  color: #fff; /* 设置按钮文字颜色 */
  border: none;
  border-radius: 5px;
  cursor: pointer;
  outline: none; /* 去除按钮点击时的边框 */
}

.like-button:hover,
.favorite-button:hover {
  background-color: #2980b9; /* 鼠标悬停时的背景颜色 */
}
</style>
